<template>
	<view class="page-information">
		<u-navbar title="消息中心" back-icon-color="#000" :border-bottom="false"
		title-size="36" title-color="#000" title-bold></u-navbar>
		<u-tabs :list="tabList" :is-scroll="false" :current="current" 
		active-color="#c40200" bar-width="60"
		@change="change"></u-tabs>
			<block v-if="current==0">
				<view class="" v-for="(item1,index1) in informationList" :key="item1.id">
					<u-line color="#999"/>
					<view class="list u-margin-bottom-20 u-margin-top-20 u-flex " @click="goDetail('to',{id:item1.id})">
						<view class="list-left u-margin-left-30 u-margin-right-10" 
						style="width: 100rpx;height: 100rpx;">
							<u-badge v-if="item1.mzt == 0" :is-dot="true" type="error"></u-badge>
							<u-icon name="bell" size="60" :color="item1.mzt == 0 ? '#c40200' : '#999'"></u-icon>
						</view>
						<view class="list-right u-flex u-col-top u-row-around u-font-30">
							<view class="">
								{{item1.xxbt}}
							</view>
							<view class="time u-font-24">
								{{$u.timeFrom(item1._createtime, 'yyyy-mm-dd')}}
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="current==1">
				<view class="" v-for="(item2,index2) in unreadList" :key="item2.id">
					<u-line color="#999"/>
					<view class="list u-margin-bottom-20 u-margin-top-20 u-flex" @click="goDetail('to',{id:item2.id})">
						<view class="list-left u-margin-left-30 u-margin-right-10" 
						style="width: 100rpx;height: 100rpx;">
							<u-badge v-if="item2.mzt == 0" :is-dot="true" type="error"></u-badge>
							<u-icon name="bell" size="60" :color="item2.mzt == 0 ? '#c40200' : '#999'"></u-icon>
						</view>
						<view class="list-right u-flex u-col-top u-row-around u-font-30">
							<view class="">
								{{item2.xxbt}}
							</view>
							<view class="time u-font-24">
								{{$u.timeFrom(item2._createtime, 'yyyy-mm-dd')}}
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="current==2">
				<view class="" v-for="(item3,index3) in readList" :key="item3.id">
					<u-line color="#999"/>
					<view class="list u-margin-bottom-20 u-margin-top-20 u-flex" @click="goDetail('to',{id:item3.id})">
						<view class="list-left u-margin-left-30 u-margin-right-10" 
						style="width: 100rpx;height: 100rpx;">
							<u-badge v-if="item3.mzt == 0" :is-dot="true" type="error"></u-badge>
							<u-icon name="bell" size="60" :color="item3.mzt == 0 ? '#c40200' : '#999'"></u-icon>
						</view>
						<view class="list-right u-flex u-col-top u-row-around u-font-30">
							<view class="">
								{{item3.xxbt}}
							</view>
							<view class="time u-font-24">
								{{$u.timeFrom(item3._createtime, 'yyyy-mm-dd')}}
							</view>
						</view>
					</view>
				</view>
			</block>
	</view>
</template>

<script>
	import {commonGet} from "@/api/commonapi.js"
	export default {
		data() {
			return {
				tabList: [{
					name: '全部'
				}, {
					name: '未读'
				}, {
					name: '已读',
				}],
				current: 0,
				informationList:[],
				unreadList:[],
				readList:[],
				pagesize:10
			}
		},
		onLoad() {
			this.getInformationList()
		},
		computed:{
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getInformationList(pagesize){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"sMessageM_list_proc",
					para:JSON.stringify({
						pagesize: pagesize || 10
					})
				}
				commonGet(query,({Data:{Data}})=>{
					_this.informationList = Data
					_this.unreadList = _this.informationList.filter((item,index)=>{
						return item.mzt == 0
					})
					_this.readList = _this.informationList.filter((item,index)=>{
						return item.mzt == 1
					})
				})
			},
			goDetail(type,params){
				this.informationList.find((item)=>{
					if(item.id == params.id) {
						return item.mzt = "1"
					}
				})
				this.unreadList = this.informationList.filter((item,index)=>{
					return item.mzt == 0
				})
				this.readList = this.informationList.filter((item,index)=>{
					return item.mzt == 1
				})
				this.$u.route({
					type:type,
					url: "/pages/HomeLnner/information-detail/information-detail",
					params:params
				})
			}
		},
		onReachBottom(){
			this.pagesize += 10
			this.getInformationList(this.pagesize)
		}
	}
</script>

<style lang="scss">
.page-information{
	.list{
		height: 100rpx;
		.list-left{
			width: 100rpx;
			height: 100rpx;
			position: relative;
			display: grid;
			place-items:center;
		}
		.list-right{
			flex-direction: column;
			height: 100%;
			.time{
				color: #999;
			}
		}
	}
}
</style>
